<template>
  <div>
    <van-nav-bar title="线路站点" left-text="返回" left-arrow @click-left="back" />
    <div class="line-city">
        {{list.name}}
        
        <van-image width="10rem" height="7rem" fit="scale-down" :src="'http://124.93.196.45:10001' + list.imgUrl"/>
    </div>

    

    <div>
        <p>全部线路</p>
        <ul v-for="item in linelist" :key="item.lineId" >
            <li @click="onSearch(item)">线路id: {{item.lineId}} <span>站点名: {{item.lineName}}</span></li>
        </ul>
    </div>

  </div>
</template>

<script>
import mixin from  "@/mixin/flag";
import {linecity,linelist,linesearch} from "./Service"
export default {
    mixins:[mixin],
    data(){
        return{
            list:[],
            linelist:[],
            id:'',
            linename:'',
        }
    },
    methods:{
        back(){
            this.$router.go(-1);
        },
        async onSearch(item){
            let res = await linesearch({
                id:item.lineId,
            })
            console.log(res);
            this.$dialog.alert({
                title: `${res.data.data.runStationsName}`,
                message: `站点路线：${res.data.data.first} → ${res.data.data.end}<br><br>运行时间：${res.data.data.startTime} - ${res.data.data.endTime}`,
                }).then(() => {
                // on close
            });
        }
        
    },
    async created(){
        let res = await linecity();
        // console.log(res);
        this.list=res.data.data
        let res1=await linelist();
        // console.log(res1);
        this.linelist = res1.data.data
    }
}
</script>

<style lang="scss" scoped>
.line-city{
    font-size: 20px;
    text-align: center;
}
p{
    font-size:18px;
    margin-bottom: 20px;
    margin-top:40px;
    padding-left: 15px;
    font-weight: bold;
}
ul{
    font-size: 16px;
    padding-left: 15px;
    li{
        margin-bottom: 10px;
        span{
            margin-left: 80px;
        }
    }
}

</style>